/* eslint-disable */
// 最小宽度
const MIN_WIDTH = 300
// 最小高度
const MIN_HEIGHT = 200

const e = document.getElementById


const timeFormat = {
    formatHHMMSS(second) {
      const secondNum = parseInt(second, 10)
      let hours = Math.floor(secondNum / 3600)
      let minutes = Math.floor((secondNum - (hours * 3600)) / 60)
      let seconds = secondNum - (hours * 3600) - (minutes * 60)
      if (hours < 10) {
        hours = '0' + hours
      }
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      if (seconds < 10) {
        seconds = '0' + seconds
      }
      let hoursStr = ''
      if (hours !== '00') {
        hoursStr = hours + ':'
      }
      return hoursStr + minutes + ':' + seconds
    }
  }




// 视频基类
class IBaseVideo {
  constructor(attrs, context) {
    // 参数校验
    // if(!this._judgeAttr(attrs)) return null
    // 参数
    this.attrs = attrs
    // 视频宽度
    this.width = attrs.width || 0
    // 视频高度
    this.height = attrs.height || 0
    // 视频名称
    this.name = attrs.name || ''
    // 视频视角名称
    this.perspectiveName = attrs.perspectiveName || ''
    // 视频地址
    this.sourceURL = attrs.sourceURL
    // 视频实例
    this.videoInstance = null
    // 当前是否为主视频
    this.isMain = false
    // ref 实例
    this.context = context
    // el 实例名称
    this.elName = attrs.elName
    // 当前是否全屏状态
    this.isFullPage = false
    // el实例
    this.el = null
  }

  // 视频初始化
  init() {
    this.el = this._getEl()
    const libPath = this._basePath()
    this.videoInstance = new GoldPlay(this.el, {
      libPath,
      ...this.attrs
    })
  }

  // 获取播放器实例
  getVideoInstance() {
    return this.videoInstance
  }

  // 更新视频框大小
  changeSize(width, height) {
    this.width = width
    this.height = height
    const fullPage = this.videoInstance.componentsController.fullPage
    fullPage.saveOriginPosition()
    fullPage.resizeTo(width, height)
    fullPage.resetPosition()
    scrollTo(0, 0)

    // 全屏回退参数记忆
    fullPage.initProps()
    fullPage.resetPosition()
    scrollTo(0, 0)
  }

  // 主副视频标记切换
  changeMainVideo() {
    this.isMain = !this.isMain
  }

  // 播放同步
  rewritePlay(subIns) {
    const context = this.videoInstance
    const oldPlay = context.play
    context.play = () => {
      oldPlay.apply(context)
      if (this.isMain) subIns.play()
    }
  }

  // 暂停同步
  rewritePause(subIns) {
    const context = this.videoInstance
    const oldPause = context.pause
    context.pause = () => {
      oldPause.apply(context)
      if (this.isMain) subIns.pause()
    }
  }

  // 切换速度同步
  rewriteChangeSpeed(subIns) {
    const context = this.videoInstance
    const oldChangeSpeed = context.changeSpeed
    context.changeSpeed = (arg) => {
      oldChangeSpeed.call(context, arg)
      if (this.isMain) subIns.changeSpeed(arg)
    }
  }

  // 时间同步
  rewriteSeek(subIns) {
    const context = this.videoInstance
    const oldSeek = context.seek
    context.seek = (arg) => {
      oldSeek.call(context, arg)
      if (this.isMain) subIns.seek(arg)
    }
  }

  // 大的播放按钮重绘
  rewriteBigPlay() {
    const bigPlay = this.videoInstance.componentsController.bigPlayButton
    bigPlay.watch()
  }

  // 重写fullPage
  rewriteFullPage(subIns) {
    const context = this.videoInstance
    const fullPageContext = context.componentsController.fullPage
    const oldFullPage = fullPageContext.fullPage
    fullPageContext.fullPage = (arg) => {
      oldFullPage.call(fullPageContext, arg)
      this.isFullPage = true
      this.context.fullPage = true
      // 全屏的时候 记录当前的style
      // console.log(fullPageContext.options.$container.getAttribute('style'));
    }
  }

  // 重写 exitFullPage
  rewriteExitFullPage(subIns) {
    const context = this.videoInstance
    const fullPageContext = context.componentsController.fullPage
    const oldExitFullPage = fullPageContext.exitFullPage
    fullPageContext.exitFullPage = (arg) => {
      oldExitFullPage.call(fullPageContext, arg)
      this.isFullPage = false
      this.context.fullPage = false
    }
  }

  // 全屏方法
  autoFullPage(subIns) {
    const context = this.videoInstance.componentsController.fullPage
    // 副-> 主 且主为全屏状态
    if (this.isMain && subIns.isFullPage) {
      console.log('主视频自动全屏')
      context.fullPage()
    }

    // 主-> 副 且为全屏
    // if(!this.isMain && this.isFullPage) {
    //     // context.exitFullPage()
    //     this.isFullPage = false
    // }
  }

  // 底部控制栏显示隐藏
  changeControllerBar() {
    const controlBarContainer = this.videoInstance.componentsController.controlBarContainer

    const progressBar =  this.videoInstance.componentsController.progressBar
    const currentTime = this.videoInstance.currentTime

    console.log(this.videoInstance.componentsController);
    if (!this.isMain) {
      console.log('非主视频')
      controlBarContainer.element.style.visibility = 'hidden'
    // controlBarContainer.hide()
    // controlBarContainer.destroy()
    } else {
      console.log('主视频')
    //   controlBarContainer.run()
      try {
        const duration = progressBar.options.loadData.sourceData.duration
        const width = currentTime / 1000 / duration * progressBar.progressBarWidth
        progressBar.setProgressPosition(width)
        progressBar.timer.data.time = timeFormat.formatHHMMSS(time / 1000)
      }catch{
          console.log('小伙子出错了');
      }finally {
        controlBarContainer.element.style.visibility = 'visible'
      }




    // controlBarContainer.show()
    // controlBarContainer.destroy()
    }
  }

  // 去掉fullScreen
  removeFullScreen() {
    const fullScreen = this.videoInstance.componentsController.fullScreen
    fullScreen.element.style.visibility = 'hidden'
    // fullScreen.destroy()
  }

  // 参数校验
  _judgeAttr(attrs) {
    const flag = true
    if (!attrs) flag = false
  }

  // 获取el实例
  _getEl() {
    return this.context.$refs[this.elName]
  }

  // FIXME 视频基础路径 交付修改为配置项
  _basePath() {
    return `${window.location.origin}/static/player/lib/`
  }
}

// 主视频
class MainVideo extends IBaseVideo {
  constructor(attrs, context) {
    super(attrs, context)
    this.width = attrs.width || 800
    this.height = attrs.height || 600
    // 当前是否为主视频
    this.isMain = true
  }
}

// 副视频
class SubVideo extends IBaseVideo {
  constructor(attrs, context) {
    super(attrs, context)
    this.width = attrs.width || 320
    this.height = attrs.height || 210
    // 当前是否为主视频
    this.isMain = false
  }
}

// 视频操作类
export default class VideoPlayer {
  constructor(attrs, context) {
    // 参数缓存
    this.attrs = attrs

    // 显示副窗口
    this.isShowSub = attrs.isShowSub

    // 组件实例
    this.context = context

    // 参数校验
    if (!this._judgeParam()) return null

    // 视频实例
    this.videoMap = {
      mVideo: null, // 主视频
      sVideo: null // 副视频
    }

    // 当前主视频 -- 视频切换用
    this.curMVideo = null
    // 当前副视频
    this.curSVideo = null

    // 主副视频是否都加载完毕 2 完毕
    this.isAllReady = 0

    this._initVideo()
  }

  // 是否都加载完毕
  allVideoReady(){
      if(this.isAllReady===2) {
          console.log('全部准备好了');
          this.context.isAllReady = true
      }
  }

  // 视频初始化
  _initVideo() {
    this.videoMap.mVideo = new MainVideo(this.attrs.mainVideo, this.context)
    this.videoMap.sVideo = new SubVideo(this.attrs.subVideo, this.context)

    // this.videoMap.sVideo.getVideoInstance().events.on('Player.ready', () => {
    //     console.log('副视频加载完毕');
    // })

    // 视频初始化
    const { mVideo, sVideo } = this.videoMap
    mVideo.init()
    sVideo.init()

    mVideo.getVideoInstance().events.on('Player.ready', () => {
        console.log('主视频加载完毕');
        this.isAllReady +=1
        this.allVideoReady()
    })
    sVideo.getVideoInstance().events.on('Player.ready', () => {
        console.log('副食品加载完毕');
        this.isAllReady +=1
        this.allVideoReady()
    })

    this.curMVideo = mVideo
    this.curSVideo = sVideo

    // 主副视频同步方法
    this.curMVideo.rewritePlay(this.curSVideo.getVideoInstance())
    this.curSVideo.rewritePlay(this.curMVideo.getVideoInstance())
    this.curMVideo.rewritePause(this.curSVideo.getVideoInstance())
    this.curSVideo.rewritePause(this.curMVideo.getVideoInstance())
    this.curMVideo.rewriteChangeSpeed(this.curSVideo.getVideoInstance())
    this.curSVideo.rewriteChangeSpeed(this.curMVideo.getVideoInstance())
    this.curMVideo.rewriteSeek(this.curSVideo.getVideoInstance())
    this.curSVideo.rewriteSeek(this.curMVideo.getVideoInstance())

    this.curMVideo.rewriteFullPage(this.curSVideo.getVideoInstance())
    this.curSVideo.rewriteFullPage(this.curMVideo.getVideoInstance())
    this.curMVideo.rewriteExitFullPage(this.curSVideo.getVideoInstance())
    this.curSVideo.rewriteExitFullPage(this.curMVideo.getVideoInstance())

    window.$instance = this.curMVideo

    // 底部操作栏显示隐藏
    this.curMVideo.changeControllerBar()
    this.curSVideo.changeControllerBar()

    // 删除fullScreen
    this.curMVideo.removeFullScreen()
    this.curSVideo.removeFullScreen()
  }

  // 主副视频切换
  switchToMain(isMain) {
    if (isMain) return
    // z-index 控制
    this.context.isMain = !this.context.isMain

    console.log('主副切换')

    // 组件数据交换 --> UI控制
    const vData = this.context.v
    let tempAttr = {}
    tempAttr = vData.mainVideo
    vData.mainVideo = vData.subVideo
    vData.subVideo = tempAttr

    // 视频实例切换 --> 实例控制
    const tmpVideo = this.curMVideo
    this.curMVideo = this.curSVideo
    this.curSVideo = tmpVideo

    // 标记切换
    this.curMVideo.changeMainVideo()
    this.curSVideo.changeMainVideo()

    // 当前主副视频大小
    const mainSize = {
      width: this.curSVideo.width,
      height: this.curSVideo.height
    }

    const subSize = {
      width: this.curMVideo.width,
      height: this.curMVideo.height
    }

    this.context.$nextTick(() => {

      // 改变视频框大小
      this.curMVideo.changeSize(mainSize.width, mainSize.height)
      this.curSVideo.changeSize(subSize.width, subSize.height)

      // 大的播放按钮重绘
      this.curMVideo.rewriteBigPlay()
      this.curSVideo.rewriteBigPlay()

      // 全屏监测
      this.curMVideo.autoFullPage(this.curSVideo, true)
      this.curSVideo.autoFullPage(this.curMVideo, true)

      this.context.$nextTick(() => {
        this.curMVideo.changeControllerBar()
        this.curSVideo.changeControllerBar()
      })
    })
  }

  // 参数校验
  _judgeParam() {
    const flag = true
    if (!this.attrs) {
      flag = false
      console.error('!attrs canot be null')
    }
    if (!this.context) {
      flag = false
      console.error('!context canot be null')
    }
    return flag
  }
}
